<template>
    <div class="w-full p-8 flex justify-center">
        <a-form :model="formState">
            <div class="flex-between">
                <div class="font-bold">阿里云配置</div>
                <a-button type="link">帮助</a-button>
            </div>
            <a-form-item label="AccessKey ID:" name="accessKeyId" required>
                <a-input v-model:value="formState.accessKeyId" placeholder="请输入accessKeyId"></a-input>
            </a-form-item>

            <a-form-item label="秘钥 Secret:" name="Secret" required>
                <a-input v-model:value="formState.Secret" placeholder="请输入Secret"></a-input>
            </a-form-item>

            <a-form-item label="ARN:" name="ARN" required>
                <a-input v-model:value="formState.ARN" placeholder="请输入ARN"></a-input>
            </a-form-item>

            <a-form-item label="对象存储Oss Region:" name="OssRegion" required>
                <a-input v-model:value="formState.OssRegion" placeholder="请输入Oss Region"></a-input>
            </a-form-item>

            <a-form-item label="对象存储Oss Bucket:" name="OssBucket" required>
                <a-input v-model:value="formState.OssBucket" placeholder="请输入Oss Bucket"></a-input>
            </a-form-item>

            <div class="flex-between">
                <div class="font-bold">阿里云短线验证码</div>
                <a-button type="link">帮助</a-button>
            </div>

            <a-form-item label="签名名称:" name="signatureName" required>
                <a-input v-model:value="formState.signatureName" placeholder="请输入签名名称"></a-input>
            </a-form-item>
            
            <a-form-item label="模板CODE:" name="templateCode" required>
                <a-input v-model:value="formState.templateCode" placeholder="请输入模板CODE"></a-input>
            </a-form-item>


            <a-button @click.prevent="onSubmit" type="primary" html-type="submit" size="large">提交保存</a-button>

        </a-form>
    </div>
</template>

<script setup lang="ts">
const formState = reactive<{
    [key: string] : string
}>({
    accessKeyId: '',
    Secret: '',
    ARN: '',
    OssRegion: '',
    OssBucket: '',
    signatureName: '',
    templateCode: ''
})

const onSubmit = () => {
    alert(JSON.stringify(formState))
    reset()
}
const reset = () => {
    Object.keys(formState).forEach((key: string) => {
        formState[key] = ''
    })
}
</script>